<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文件上传 demo2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="favicon.ico">
    <link rel="stylesheet" href="../../assets/css/main.css">
</head>
<body>

<div class="layui-fluid x-body" id="app">

    <blockquote class="layui-elem-quote">
        本页面所有 demo 均采用的 JUpload 文件上传插件，想了解更多有关 JUpload 信息，请点击
        <a href="https://gitee.com/blackfox/ajaxUpload" target="_blank" class="text-color-red text-bold">这里</a> 查看。
    </blockquote>

    <div class="layui-row">

        <!-- 普通上传 -->
        <fieldset class="layui-elem-field">
            <legend>单图上传</legend>
            <div class="layui-field-box">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="test-upload-single">选择图片</button>
                    <div class="layui-upload-list">
                        <img class="img-thumbnail" id="test-upload-single-img" style="width: 120px; height: 120px;"
                             src="http://ow93rpra1.bkt.clouddn.com/image-15054658162330.jpg"
                             data-src="http://ow93rpra1.bkt.clouddn.com/image-15054658162330.jpg">
                    </div>
                </div>
            </div>
        </fieldset>

        <!-- 多图上传 -->
        <fieldset class="layui-elem-field">
            <legend>多图片上传</legend>
            <div class="layui-field-box">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="test-upload-mutiple">选择图片</button>
                    <div class="layui-upload-list" id="image-box">

                    </div>
                </div>
            </div>
        </fieldset>

    </div>
</div>

<script type="text/javascript" src="../../js/libs/jquery.min.js "></script>
<script type="text/javascript" src="../../js/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../js/libs/vue/vue.js"></script>
<script type="text/javascript" src="../../js/libs/uploader/JUpload.min.js"></script>
<script type="text/javascript" src="../../js/libs/jpreview.js"></script>
<script type="text/javascript" src="../../js/main.js"></script>
<script>

	layui.use(["layer"], function(){
		var $ = layui.jquery;

		$("#test-upload-single").JUpload({
			url : "http://herosphp.r9it.com/admin/upload/qiniu",
			src : "file",
			success : function(url) {
				//save image url here
				layMsgOk("文件上传成功.");
				$("#test-upload-single-img").attr("src", url);
			},
            error: function (message) {
                
            }
		});

		$("#test-upload-mutiple").JUpload({
			url : "http://herosphp.r9it.com/admin/upload/qiniu",
			src : "file",
			datas : [
                "http://oxy1ihdnt.bkt.clouddn.com/image-15323182993693.jpg",
                "http://oxy1ihdnt.bkt.clouddn.com/image-bc3d428bfa48f65a1f32e847e7d80dee",
                "http://oxy1ihdnt.bkt.clouddn.com/image-15111407382181.jpg",
                "http://oxy1ihdnt.bkt.clouddn.com/image-8a870588102ec9ef486c6a765cb5c221",
            ],
			image_container : "image-box",

			success : function(images) {
				//save image urls here
				layMsgOk("文件上传成功.");
				$("img").jpreview();
                console.log(images);
			},
			error: function (message) {
                // log errors here
			},
			remove: function (images) {
				// do some things when the image is removed
                // the $images is the image url array
                console.log(images);
			}
		});

		// 初始化图片预览插件
		$("img").jpreview();
	});
 
</script>
</body>

</html>